<template>
  <div class="body" style="margin: 20px auto 0">
    <div class="body-left">
      <nav class="side-navigator-wrap">
        <!-- 左侧大模型子站 -->

        <div class="nav-item-wrap nav-item-underline">
          <a href="#">
            <SvgIcon name="DmxLeftSvg" size="16px" />

            <span>大模型子站</span>

            <SvgIcon name="DmxRightSvg" size="12px" />
          </a>
        </div>

        <div
          class="nav-item-wrap"
          :class="{ 'nav-item-wrap-active': item.isActive }"
          @click="
            () => {
              toggleActive1(item)
              router.push(item.url)
              useuseJuejinSkeletonHotgetdata()
            }
          "
          v-for="item in navItem"
          :key="item.title"
        >
          <a href="#">
            <SvgIcon
              :name="item.svgName"
              size="16px"
              color="#8a919f"
              style="color: #8a919f"
            />
            <!-- <GzSvg /> -->
            <span>{{ item.title }}</span>
          </a>
        </div>

        <!-- 左侧排行榜 -->

        <div class="nav-item-wrap">
          <a href="#">
            <SvgIcon name="PhbSvg" />
            <span>排行榜</span>
          </a>
        </div>
      </nav>
    </div>
    <div class="body-right">
      <div class="body-right-list">
        <header class="list-header">
          <nav role="navigation" class="list-nav">
            <ul class="nav-list">
              <li
                class="nav-item"
                v-for="item in navList"
                :key="item.title"
                :class="{ 'nav-active': item.isActive }"
                @click="
                  () => {
                    toggleActive2(item)
                    router.push(item.url)
                  }
                "
              >
                <a href="#">{{ item.title }}</a>
              </li>
              <!-- <li class="nav-item">
                <a href="#">最新</a>
              </li> -->
            </ul>
          </nav>
        </header>
        <RouterView :key="$route.fullPath"></RouterView>
        <!-- <JuejinEntryList></JuejinEntryList> -->
      </div>
      <JuejinBodyRight ref="JuejinSkeletonHotgetdata" />
    </div>
  </div>
</template>

<script setup lang="ts">
import SvgIcon from './SvgIcon.vue'
import { ref } from 'vue'
import JuejinBodyRight from './juejinBodyRight.vue'
import router from '@/router'

const JuejinSkeletonHotgetdata = ref()

const useuseJuejinSkeletonHotgetdata = () => {
  if (JuejinSkeletonHotgetdata.value) {
    JuejinSkeletonHotgetdata.value.useJuejinSkeletonHotgetdata()
  }
}

const navItem = ref([
  { title: '关注', url: '/following', svgName: 'GzSvg', isActive: false },
  { title: '综合', url: '/recommended', svgName: 'ZhSvg', isActive: true },
  { title: '后端', url: '/backend', svgName: 'HdSvg', isActive: false },
  { title: '前端', url: '/frontend', svgName: 'QdSvg', isActive: false },
  {
    title: 'Android',
    url: '/android',
    svgName: 'AndroidSvg',
    isActive: false,
  },
  { title: 'ios', url: '/ios', svgName: 'IosSvg', isActive: false },
  { title: '人工智能', url: '/ai', svgName: 'RgznSvg', isActive: false },
  { title: '开发工具', url: '/freebie', svgName: 'KfgsSvg', isActive: false },
  { title: '代码人生', url: '/career', svgName: 'DmrsSvg', isActive: false },
  { title: '阅读', url: '/article', svgName: 'YdSvg', isActive: false },
])

const navList = ref([
  {
    title: '推荐',
    isActive: true,
    url: '/?sort=recommend',
  },
  {
    title: '最新',
    isActive: false,
    url: '/?sort=newest',
  },
])

const toggleActive1 = (item: { isActive: boolean }) => {
  for (let i = 0; i < navItem.value.length; i++) {
    navItem.value[i].isActive = false
  }
  item.isActive = !item.isActive
}

const toggleActive2 = (item: { isActive: boolean }) => {
  for (let i = 0; i < navList.value.length; i++) {
    navList.value[i].isActive = false
  }
  item.isActive = !item.isActive
}
</script>
